"use client"

import { useState } from "react"
import { Button } from "antd"
import { LeftOutlined, CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons"
import "./Payment.css"
import { useNavigate } from "react-router-dom"

const Payment = () => {
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("alipay")
  const [isLoading, setIsLoading] = useState(false)
  const [paymentResult, setPaymentResult] = useState(null) // null, 'success', 'error'

  const paymentInfo = {
    amount: 2799,
    orderId: "202412301234567890",
  }

  const paymentMethods = [
    {
      id: "alipay",
      name: "支付宝支付",
      icon: "支",
      iconClass: "alipay",
      description: "推荐使用支付宝支付",
    },
    {
      id: "wechat",
      name: "微信支付",
      icon: "微",
      iconClass: "wechat",
      description: "",
    },
  ]

  const navigate = useNavigate()

  const handleBack = () => {
    console.log("返回")
    navigate(-1)
  }

  const handlePaymentMethodSelect = (methodId) => {
    setSelectedPaymentMethod(methodId)
  }

  const handleConfirmPayment = async () => {
    setIsLoading(true)

    try {
      // 模拟支付请求
      await new Promise((resolve) => setTimeout(resolve, 2000))

      // 模拟支付结果（这里可以根据实际API返回结果）
      const isSuccess = Math.random() > 0.2 // 80% 成功率

      if (isSuccess) {
        setPaymentResult("success")
      } else {
        setPaymentResult("error")
      }
    } catch (error) {
      console.error("支付失败:", error)
      setPaymentResult("error")
    } finally {
      setIsLoading(false)
    }
  }

  const handlePaymentResultClose = () => {
    setPaymentResult(null)
    if (paymentResult === "success") {
      // 支付成功后的跳转逻辑
      console.log("支付成功，跳转到订单详情页")
      navigate("/")
    }
  }

  const renderPaymentResult = () => {
    if (!paymentResult) return null

    return (
      <div className="payment-result">
        <div className="payment-result-content">
          <div className={`payment-result-icon ${paymentResult}`}>
            {paymentResult === "success" ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
          </div>
          <div className="payment-result-title">{paymentResult === "success" ? "支付成功" : "支付失败"}</div>
          <div className="payment-result-message">
            {paymentResult === "success" ? `已成功支付 ¥${paymentInfo.amount}` : "支付过程中出现问题，请重试"}
          </div>
          <button className="payment-result-btn" onClick={handlePaymentResultClose}>
            {paymentResult === "success" ? "查看订单" : "重新支付"}
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="payment-container">
      {/* 顶部导航栏 */}
      <div className="payment-header">
        <Button type="text" icon={<LeftOutlined />} className="back-btn" onClick={handleBack} />
        <div className="payment-header-title">支付</div>
      </div>

      {/* 主要内容 */}
      <div className="payment-content">
        {/* 支付金额 */}
        <div className="amount-section">
          <div className="amount-label">支付金额</div>
          <div className="amount-value">¥{paymentInfo.amount}</div>
        </div>

        {/* 支付方式选择 */}
        <div className="payment-methods">
          {paymentMethods.map((method) => (
            <div key={method.id} className="payment-method-item" onClick={() => handlePaymentMethodSelect(method.id)}>
              <div className={`payment-method-icon ${method.iconClass}`}>
                <span className={`${method.iconClass}-icon`}>{method.icon}</span>
              </div>
              <div className="payment-method-text">{method.name}</div>
              <div className={`payment-method-radio ${selectedPaymentMethod === method.id ? "selected" : ""}`}></div>
            </div>
          ))}
        </div>
      </div>

      {/* 确认支付按钮 */}
      <button
        className="confirm-payment-btn"
        onClick={handleConfirmPayment}
        disabled={isLoading || !selectedPaymentMethod}
      >
        {isLoading ? (
          <div className="payment-loading">
            <div className="loading-spinner"></div>
            <span>支付中...</span>
          </div>
        ) : (
          "确认支付"
        )}
      </button>

      {/* 支付结果弹窗 */}
      {renderPaymentResult()}
    </div>
  )
}

export default Payment
